<template>
  <view class="pk-container">
    <!-- 左侧PK对战区域 -->
    <view class="pk-l-con">
		
		<view class="top-control">
			<select-box style="margin-left: 10px;" :selected="auto_bind" @click="bindClick">自动绑定</select-box>
			<select-box style="margin-left: 10px;" :selected="cpt.show == 1" @click="showClick">显示</select-box>
		</view>
		
    	<view class="pk-battle-area">
    	  <!-- 左边PK区域 -->
    	  <view class="pk-area left-area" v-for="(char, index) in tempChs" :key="char.id">
    	    <view class="pk-title">{{index + 1}}号主播</view>
    	    <view 
    	      class="fixed-slot"
    	      @drop="onDrop($event, index)"
    	      @dragover.prevent="onDragOver"
    	      @dragenter.prevent="onDragEnter"
    	      @dragleave="onDragLeave"
    	  		 
    	      :class="{ 'drag-over': dragOverSide === 'left' }"
    	    >
    	      <view v-if="showCharacters[index + 1] != null" class="character-gifts"
    	  			draggable="true"
    	  			@dragstart="onDragStart($event, showCharacters[index + 1])"
					:style="{opacity: (showCharacters[index + 1].show == 1 ? '1' : '0.3')}"
    	  		  >
				  {{showCharacters[index + 1].nick_name}}
    	        <image :src="showCharacters[index + 1].header" class="avatar-gifts" mode="aspectFill"></image>
    	        <text class="nickname-gifts">{{ showCharacters[index + 1].nick_name }}</text>
    	      </view>
    	      <text v-else class="placeholder">拖到此处</text>
    	    </view>
    	  </view>
    	</view>
		
    </view>

    <!-- 右侧可选角色区域 -->
    <view class="character-list">
      <view class="list-title">可选主播</view>
	  <scroll-view scroll-y="true" class="user-scroll">
	  	<view class="character-scroll">
	  	  <view 
	  	    v-for="(character, index) in characters" 
	  	    :key="index"
	  	    class="character-item"
	  	    draggable="true"
	  	    @dragstart="onDragStart($event, character)"
	  	  >
	  	    <image :src="character.header" class="avatar" mode="aspectFill"></image>
	  	    <text class="nickname">{{ character.nick_name }}</text>
	  	  </view>
	  	</view>
	  </scroll-view>
      
    </view>
  </view>
</template>

<script>
	
	import selectBox from '@/components/select-box/select-box'
	import cBtn from '@/components/c-btn/c-btn.vue'

	export default {
		
		components: {
			selectBox,
			cBtn
		},
		
		props: {
			cpt: {
				type: Object,
				default: null
			}
		},
		
		data() {
			return {
				dragOverSide: null,
				draggedCharacter: null,
				leftPlayer: null,
				rightPlayer: null,
				tempChs: [],
				characters: [],
				showCharacters: [],
				auto_bind: false
			}
		},
	  
		watch: {
			cpt(newVal) {
				this.configPlayers()
			}
		},
	  
		created() {
			this.configPlayers()
			
			window.electronAPI.systemSetting('auto_bind').then((settingVal) => {
				this.auto_bind = (settingVal.value == 1)
			})
			
			window.electronAPI.onSystemSettingChanged((settingVal, from) => {
				this.auto_bind = (settingVal.value == 1)
			})
		},
		
		beforeDestroy() {
			window.electronAP.removeSystemSettingChanged()
		},
	  
		methods: {
	  
			configPlayers() {
				window.electronAPI.userList('gifts_user_temp', this.cpt.id).then((users) => {
					let ctres = []
					this.tempChs = []
					this.showCharacters = []
					for (let user of users) {
						if (typeof(user.user_cpt_temp) == 'undefined' || !user.user_cpt_temp || user.user_cpt_temp.position == 0) {
							ctres.push(user)
						} else {
							this.showCharacters[user.user_cpt_temp.position] = user
						}
						this.tempChs.push(user)
					}
					this.characters = ctres
				})
			},
			
			showClick() {
				this.$emit('componentShowClick')
			},
			
			bindClick() {
				this.auto_bind = !this.auto_bind
				window.electronAPI.systemSettingChangeTo('auto_bind', this.auto_bind ? '1' : '0', 'gifts-controller')
			},

			onDragStart(e, character) {
				this.draggedCharacter = character
			},
			
			onDragEnter(e, side) {
				this.dragOverSide = side;
			},
			
			onDragLeave() {
				this.dragOverSide = null;
			},
			
			onDragOver(e) {
				e.preventDefault();
			},
			
			updateUser(position, player) {
				let coins = 0
				if (player.user_cpt_temp) {
					coins = player.user_cpt_temp.coins
				} else {
					player.user_cpt_temp = {
						coins: 0
					}
				}
				player.user_cpt_temp.position = position
				return window.electronAPI.updateUserCptTemp({
					table_name: 'gifts_user_temp',
					u_id: player.id,
					cpt_id: this.cpt.id,
					position: position,
					coins: coins,
				}, 'gifts-controller')
			},
		
			onDrop(e, index) {
				e.preventDefault()
				this.dragOverSide = null

				if (!this.draggedCharacter) return
				// 临时存储被替换的角色
				let replacedCharacter = null
				
				replacedCharacter = this.showCharacters[index + 1]
				this.showCharacters[index + 1] = this.draggedCharacter;
				if (this.draggedCharacter.user_cpt_temp && this.draggedCharacter.user_cpt_temp.position != 0) {
					// 原来是有位置的，需要清空原来位置
					this.showCharacters[this.draggedCharacter.user_cpt_temp.position] = null
					// this.rightPlayer = null
				}
				this.updateUser(index + 1, this.showCharacters[index + 1])
				

				// 更新角色列表
				this.characters = this.characters.filter(
					char => char.id !== this.draggedCharacter.id
				);

				if (replacedCharacter) {
					this.characters.push(replacedCharacter);
				}
				if (replacedCharacter != null) {
					replacedCharacter.user_cpt_temp = this.updateUser(0, replacedCharacter)
				}
				this.draggedCharacter = null;

				if (this.leftPlayer && this.rightPlayer) {
					uni.showToast({
						title: '对战准备就绪!',
						icon: 'none',
						duration: 1000
					});
				}
			}
		}
	}
</script>

<style scoped>
	
	.pk-container {
		width: 100%;
		height: 100%;
		display: flex;
		/* background-color: #f8f8f8; */
		/* border-radius: 8px; */
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		overflow: hidden;
		color: orange;
	}
	
	.pk-l-con {
		flex: 0 0 600px;
		display: flex;
		flex-direction: column;
	}
	
	.top-control {
		width: 100%;
		height: 40px;
		/* background-color: #73738f; */
		border-bottom: #73738f 1px solid;
		display: flex;
		align-items: center;
	}

	/* 左侧PK对战区域 */
	.pk-battle-area {
		height: 1px;
		flex: 1;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 右侧可选角色区域 */
	.character-list {
		flex: 1;
		width: 1px;
		height: 100%;
		display: flex;
		flex-direction: column;
		/* background-color: #282c35; */
		border-left: 1px solid #73738f;
		/* padding: 15px; */
	}

	.list-title {
		font-size: 16px;
		font-weight: bold;
		margin-top: 20px;
		margin-bottom: 15px;
		color: #dfdfdf;
		text-align: center;
		height: 20px;
	}

	.character-scroll {
		height: 1px;
		flex: 1;
		/* overflow-y: auto; */
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.pk-area {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pk-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #c3c3c3;
	}

	.fixed-slot {
		width: 60px;
		height: 85px;
		border: 2px dashed #999;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #272730;
		transition: all 0.2s;
	}

	.drag-over {
		border-color: #007AFF;
		background-color: rgba(0, 122, 255, 0.1);
	}

	.placeholder {
		color: #999;
		font-size: 12px;
	}

	.vs-area {
		width: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vs-text-v {
		font-size: 24px;
		font-weight: bold;
		color: #ff2440;
	}

	.vs-text-s {
		font-size: 24px;
		font-weight: bold;
		color: #48b7fc;
	}

	.character-item, .character-gifts {
		width: 51px;
		height: 74px;
		margin: 4px;
		border-radius: 3px;
		background-color: #353e50;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 12px;
		color: wheat;
		position: relative;
	}

	.avatar-gifts {
		position: absolute;
		left: 1px;
		top: 1px;
		width: 49px;
		height: 49px;
		border-radius: 3px;
	}

	.nickname-gifts {
		font-size: 12px;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-shadow: 0 0 3px black;
	}
	
	.character-item, .character {
		width: 103px;
		height: 120px;
		margin: 8px;
		border-radius: 3px;
		background-color: #353e50;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 12px;
		color: wheat;
		position: relative;
	}
	
	.avatar {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 93px;
		height: 93px;
		/* border-radius: 50%; */
		/* margin-bottom: 6px; */
		/* object-fit: cover; */
		border-radius: 3px;
	}
	
	.nickname {
		font-size: 12px;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-shadow: 0 0 3px black;
	}

	.user-scroll {
		width: 100%;
		height: 100%;
	}

</style>